<template>
  <vxe-table
    ref="tableRef"
    :data="model as any"
    stripe
    :column-config="{ resizable: true }"
    :size="vxeTableSize"
  >
    <vxe-column :title="t('common.index')" type="seq" field="seq" width="60" align="center" />
    <vxe-column
      :title="t('infoRuleItem.fields.field')"
      field="fieldI18nKey"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        {{ t(scope.row.fieldI18nKey) }}
      </template>
    </vxe-column>
    <vxe-column
      :title="t('infoRuleItem.fields.isReadonly')"
      field="isReadonly"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <el-switch
          v-model="scope.row.isReadonly"
          :active-text="t('common.yes')"
          :inactive-text="t('common.no')"
          :disabled="scope.row.isReadonlyLocked"
          inline-prompt
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('infoRuleItem.fields.isFreeEdit')"
      field="isFreeEdit"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <el-switch
          v-model="scope.row.isFreeEdit"
          :active-text="t('common.yes')"
          :inactive-text="t('common.no')"
          :disabled="scope.row.isFreeEditLocked"
          inline-prompt
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('infoRuleItem.fields.isVerifyEdit')"
      field="isVerifyEdit"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <el-switch
          v-model="scope.row.isVerifyEdit"
          :active-text="t('common.yes')"
          :inactive-text="t('common.no')"
          :disabled="scope.row.isVerifyEditLocked"
          inline-prompt
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('infoRuleItem.fields.isRequired')"
      field="isRequired"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <el-switch
          v-model="scope.row.isRequired"
          :active-text="t('common.yes')"
          :inactive-text="t('common.no')"
          :disabled="scope.row.isRequiredLocked"
          inline-prompt
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoVerify.fields.remark')"
      field="remark"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <el-input
          v-model="scope.row.remark"
          :placeholder="t('common.inputTextPlaceholder') + t('ustcStudentInfoVerify.fields.remark')"
        />
      </template>
    </vxe-column>
  </vxe-table>
</template>

<script setup lang="ts">
import { InfoRuleItemVO } from '@/api/core/inforuleitem'
import { useI18n } from 'vue-i18n'
import { useAppStore } from '@/store/modules/app'

const model = defineModel<InfoRuleItemVO[]>({ required: true })

const appStore = useAppStore()
const vxeTableSize = computed(() => appStore.getCurrentSizeVxe)

const { t } = useI18n() // 国际化
</script>
